<template>
	<div>
		<myheader>我的</myheader>
		<header>
			<router-link to="/person/login">
				<div><i class=" icon-user"></i></div>
				<div>
					<p>立即登录</p>
				</div>
			</router-link>
			
		</header>
		<section id="list">
			<div>
				<p class="p1">0.0<span>元</span></p>
				<p class="p2">余额</p>
			</div>
			<div>
				<p class="p1">0<span>个</span></p>
				<p class="p2">优惠</p>
			</div>
			<div>
				<p class="p1">0<span>分</span></p>
				<p class="p2">积分</p>
			</div>
		</section>
		<ul id="list2">
			<li>
				<i class=" icon-file-alt"></i>我的订单<span class="icon-angle-right"></span>
			</li>
			<li>
				<i class=" icon-suitcase"></i>积分商城<span class="icon-angle-right"></span>
			</li>
			<li>
				<i class="icon-trophy"></i>饿了么会员卡<span class="icon-angle-right"></span>
			</li>
			<li>
				<i class="icon-user"></i>服务中心<span class="icon-angle-right"></span>
			</li>
			<li>
				<i class="icon-circle-arrow-down"></i>下载饿了么APP<span class="icon-angle-right"></span>
			</li>
		</ul>
	</div>
</template>

<script type="text/javascript">
	import '../../assets/Font-Awesome-3.2.1/css/font-awesome.min.css'
	import myheader from '../header'
	import axios from 'axios'
	export default{
		name:'person',		
		components:{
			myheader
		},
		created:function(){
//			axios.get('https://mainsite-restapi.ele.me/eus/v1/users/188602465')
//				.then(function(res){
//					console.log(res)
//				}.bind(this))
//				.catch(function(error){
//					console.log(error)
//			})
		}
	}
</script>

<style type="text/css" scoped="scoped">
 	*{box-sizing: border-box;}
	header{height: 100px;width: 100%;background: #0398ff;overflow: hidden;}
	header i{font-size: 55px;color: white!important;line-height:80px;}
	header div{float: left;margin-top:-15px ;}
	header div:nth-of-type(1){text-align: center;width: 30vw;width: 80px;height: 80px;color: white;
	border: 1px solid white;border-radius:50% ;margin:0px 20px;color: white;line-height:80px;}
	header div:nth-of-type(2){font-size: 20px;font-weight: 800;color: white;padding-top:10px;margin: 10px 30px;}
	 
	/*中间三个方块*/
	#list{display: flex; flex-wrap: wrap;justify-content:center;}
	#list div{width: 33.3vw;height: 33.3vw;border-bottom: 1px solid gainsboro;border-left: 1px solid gainsboro;text-align: center;padding-top: 10vw;background: white;}
	#list div:nth-of-type(1){border-left: none;}
	.p1{font-size: 25px;font-weight: 900; color: #0398ff;}
	.p1 span{font-size: 16px;color: black;font-weight: 400;}
	.p2{color: gray;}
	
	/*下面的类别*/
	#list2{margin-top: 10px;background: white;}
	#list2 li{width: 100%;height: 60px;line-height: 60px;border-bottom: 1px solid gainsboro;padding: 0px 30px;}
	#list2 i{margin: 0px 10px;}
	#list2 span{float: right;margin-top:20px ;}
	.icon-file-alt{color: #4aa5f0;}
	.icon-suitcase{color: #fc7b53;}
	.icon-trophy{color: #ffc636;}
	.icon-user{color: #ffc636;}
	.icon-circle-arrow-down{color: #3cabff;}
</style>